<template>
	<div class="food">
		<Header />
		<div class="page-header">
			<h1>汉中美食推荐</h1>
			<p>品味汉中特色美食，感受舌尖上的两汉三国文化</p>
		</div>
		<div class="food-grid">
			<el-card class="food-card" shadow="hover" v-for="(item, index) in foodItems" :key="index">
				<div class="food-image">
					<img :src="item.image" :alt="item.name" />
				</div>
				<div class="food-content">
					<h3>{{ item.name }}</h3>
					<div class="food-rating">
						<el-rate :value="item.rating" disabled :max="5" show-text></el-rate>
					</div>
					<div class="food-description">
						<p>{{ item.description }}</p>
					</div>
					<div class="food-features">
						<el-tag v-for="(tag, i) in item.features" :key="i" type="info" size="small">{{ tag }}</el-tag>
					</div>
				</div>
			</el-card>
		</div>
		<div class="block">
			<!-- 分页组件 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="form.pageNo" :page-sizes="[4,6,8]" :page-size="form.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<div class="food-tips">
			<el-card shadow="hover" class="tips-card">
				<div class="tips-content">
					<h3><i class="el-icon-lightbulb"></i> 美食小贴士</h3>
					<p>汉中美食以米、面为主，口味偏酸辣，建议搭配当地绿茶解腻。热面皮和菜豆腐是经典搭配，早餐必尝！市区内前进路小吃街、友爱路美食街是品尝当地美食的好去处。</p>
				</div>
			</el-card>
		</div>
		<div class="footer">
      		<div class="footer-content">
        	<p>© 2025 汉中美食推荐. 保留所有权利.</p>
      </div>
    </div>
	</div>
</template>

<script>
	import Header from '@/components/Header.vue'

	export default {
		name: 'Food',
		components: {
			Header
		},
		data() {
			return {
				foodItems: [],
				form: {
					keywords: '',
					pageNo: 1,
					pageSize: 4
				},
				total: 0,
				isInitialized: false
			}
		},
		watch: {
			'$route.query.q': {
				immediate: true,
				handler(newQ) {
					this.form.keywords = newQ || '';
					console.log(this.form.keywords);
					if (this.isInitialized) {
						this.findList();
					}
				}
			}
		},
		methods: {
			handleSizeChange(pageSize) {
				console.log(pageSize);
				this.form.pageSize = pageSize;
				this.findList();
			},
			handleCurrentChange(num) {
				console.log(num);
				this.form.pageNo = num;
				this.findList();
			},
			findList() {
				console.log(this.form.keywords + "2");
				this.$http.post("userApi/food/info", this.form).then((resp) => {
					if (resp.data.code == 200) {
						this.total = resp.data.data.total;
						this.foodItems = resp.data.data.list;
					}
				})
			}
		},
		mounted() {
			if (!this.isInitialized) {
				this.findList();
				this.isInitialized = true;
			}
		},
		activated() {
			// 当页面被激活时，检查路由参数并重新加载数据
			const searchKeyword = this.$route.query.q || '';
			this.form.keywords = searchKeyword;
			this.findList();
		}
	}
</script>

<style scoped>
	.food {
		padding-top: 100px;
	}

	.page-header {
		max-width: 1200px;
		margin: 0 auto 40px;
		text-align: center;
	}

	.food-grid {
		max-width: 1200px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
		gap: 30px;
		padding: 0 20px 40px;
	}

	.food-card {
		border: none;
		border-radius: 10px;
		overflow: hidden;
		transition: transform 0.3s;
	}

	.food-card:hover {
		transform: translateY(-5px);
	}

	.food-image {
		height: 200px;
		overflow: hidden;
	}

	.food-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.5s;
	}

	.food-card:hover .food-image img {
		transform: scale(1.05);
	}

	.food-content {
		padding: 20px;
	}

	.food-content h3 {
		margin: 0 0 10px;
		color: #2c3e50;
	}

	.food-rating {
		margin-bottom: 15px;
	}

	.food-description {
		color: #34495e;
		line-height: 1.6;
		margin-bottom: 15px;
	}

	.food-features {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.food-tips {
		max-width: 1200px;
		margin: 0 auto 40px;
		padding: 0 20px;
	}

	.tips-card {
		border: none;
		background-color: #f8f9fa;
	}

	.tips-content h3 {
		margin: 0 0 15px;
		display: flex;
		align-items: center;
		color: #2c3e50;
	}

	.tips-content i {
		margin-right: 10px;
		color: #409EFF;
	}

	.tips-content p {
		color: #34495e;
		line-height: 1.6;
		margin: 0;
	}
	.footer {
		background-color: #f8f9fa;
		padding: 20px 0;
		text-align: center;
		margin-top: 40px;
	}
	.footer-content {
		max-width: 1200px;
		margin: 0 auto;
	}
	.block {
  		display: flex; /* 使用flex布局 */
  		justify-content: center; /* 水平居中 */
  		margin: 10px 0; /* 上下间距，可根据需求调整 */
	}
</style>